<template>
  <div>
    <ul id="nav">
      <li class="fl"><a class="selectOn" type="1" @click="selectLoad">最新优惠</a></li>
      <li class="fl"><a @click="selectLoad">以往活动</a></li>
      <div class="clearfix"></div>
    </ul>
    <ul id="main" >
      <li v-for="item in data">
        <router-link :to="{ path: 'detail?id='+ item.id }">
          <img v-bind:src="item.imgSrc" alt="">
          <div>
            <span class="fl">{{ item.name }}</span>
            <span class="fr">{{ item.date }}</span>
            <div class="clearfix"></div>
          </div>
        </router-link>
      </li>
    </ul>
  </div>
</template>

<style lang="less" scoped>
  body{background: white !important}
  .selectOn{
    background: #ededed;
    color: #f0af9d !important;
  }
  #nav{
    height: 2.5rem;
    border-bottom: 1px solid #ededed;
    li{
      height: inherit;
      width: 50%;
      a{
        display: block;
        height: 100%;
        width: 100%;
        text-align: center;
        line-height: 2.5rem;
        font-size: 1.2rem;
        color: #8e8e8e;
      }
    }
  }
  #main{
    li{
      padding-top: 0.5rem;
      text-align: center;
      border-bottom: 3px solid #ededed;
      a{
        display: block;
        width: 100%;
        height: 100%;
        img{
          width: 30.5rem;
          height: 9rem;
        }
        p{
          width: 30.5rem;
          margin: 0 auto;
          span{
            color: #515151;
            font-size: 1.1rem;
          }
        }
      }
    }
  }
</style>
<script>

  export default{
    name: 'acount',
    data () {
      return {
        data: []
      }
    },
    mounted: function () {
      this.$nextTick(function () {
        this.loadNow()
      })
    },
    methods: {
//      loadNow: function () {
//        let e = this
//        requestAcountNow({}).then(function (resp) {
//          e.data = resp.data.list
//        })
//      },
//      loadOld: function () {
//        let e = this
//        requestAcountOld({}).then(function (resp) {
//          e.data = resp.data.list
//        })
//      },
//      selectLoad: function (event) {
//        let item = document.querySelectorAll('#nav li a')
//        item[0].classList.remove('selectOn')
//        item[1].classList.remove('selectOn')
//        event.target.classList.add('selectOn')
//        event.target.type
//        ? this.loadNow()
//        : this.loadOld()
//      }
    }
  }
</script>
